<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .registration-form {
          max-width: 500px;
          margin: auto;
          padding: 20px;
          border: 1px solid #ddd;
          border-radius: 8px;
        }
        
        .form-item {
          margin-bottom: 15px;
        }
        
        .label, .input-field, .submit-button {
          display: block;
          width: 100%;
        }
        
        .input-field {
          padding: 8px;
          margin-top: 4px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }
        
        .submit-button {
          background-color: #007BFF;
          color: white;
          padding: 10px 15px;
          margin-top: 10px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }
        
        .submit-button:hover {
          background-color: #0056b3;
        }
        </style>
</head>
<body>
    <div id="app">
        <form @submit.prevent="submitForm" class="registration-form">
            <div class="form-item">
                <label for="username">用户名:</label>
                <input id="username" v-model="user.username" type="text" class="input-field">
            </div>
            <div class="form-item">
                <label for="email">邮箱:</label>
                <input id="email" v-model="user.email" type="email" class="input-field">
            </div>
            <div class="form-item">
                <label for="password">密码:</label>
                <input id="password" v-model="user.password" type="password" class="input-field">
            </div>
            <div class="form-item">
                <label>性别:</label>
                <div>
                <input type="radio" id="male" value="male" v-model="user.gender">
                <label for="male">男</label>
                <input type="radio" id="female" value="female" v-model="user.gender">
                <label for="female">女</label>
                </div>
            </div>
            <div class="form-item">
                <label>兴趣爱好:</label>
                <div class="checkbox-group">
                    <label><input type="checkbox" value="阅读" v-model="user.hobbies"> 阅读</label>
                    <label><input type="checkbox" value="旅行" v-model="user.hobbies"> 旅行</label>
                    <!-- 其他爱好选项 -->
                </div>
                </div>
            <div class="form-item">
                <label for="country">国家:</label>
                <select id="country" v-model="user.country" class="input-field">
                <option disabled value="">请选择国家</option>
                <option>中国</option>
                <option>美国</option>
                <option>日本</option>
                </select>
            </div>
            <button type="submit" class="submit-button">注册</button>
        </form>
    </div>

    <script>
        const { createApp, ref } = Vue;

        createApp({
            setup() {
                const user = ref({
                    username: '',
                    email: '',
                    password: '',
                    gender: '',
                    hobbies: [],
                    country: ''
                    });

                    function submitForm() {
                        console.log('提交的用户信息:', user.value);
                        // 这里可以添加表单提交的逻辑
                    }

                    return { user, submitForm };
            }
        }).mount('#app');
    </script>
</body>
</html>
